<template>

    <div id="id">
        <el-container>
            <el-header style="background:#65a15a;">
                <div class="header_box" style="margin: auto; width: 70%;">
     
                    <div class="header_box_text" style="color: rgb(252, 250, 250);line-height: 60px;">欢迎：~{{useremail}} </div>
               
               
                </div> 
            </el-header>
            <div class="main_mindd">
                <div class="main_mindd_m">
                    <div class="mindd_img">
                        <img src="../assets/img/4.gif" alt="">
                    </div>
                    <div class="mindd_imput">
                            <el-input v-model="input" placeholder="请输入内容" style="width:60%;"></el-input>
                            <el-button type="success" icon="el-icon-search" @click="search">搜索</el-button>
                    </div>
                </div>
                <div class="main_right">
                    <div class="shopping-cart" style="margin-top: -12px;">
                        <el-badge :value="count" class="item">
                            <i class="el-icon-shopping-cart-full"  @click="show" style="font-size: 35px;color: rgb(101, 161, 90);cursor:pointer;"></i>
                        </el-badge>
                        <el-badge :value="1" class="item" style="margin-left: 30px;cursor:pointer;" @click="sho">
                            <el-avatar shape="square" :size="size"  @click="sho" :src="squareUrl" ></el-avatar>
                            <!-- <i class="el-icon-user" style="margin-left: 40px;font-size: 35px;color: rgb(101, 161, 90);cursor:pointer;"></i> -->
                        </el-badge>
                    </div>
                </div> 
            </div>
            <div class="container" style="width:100%;height:60px;background-color: #fff;">
                <div class="container_mid" style="margin:auto;width:70%;">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          
                        <el-menu-item index="2" style="color: #000;margin-left: 50px;"><i class="el-icon-user" style="color: #65a15a;"></i>个人主页</el-menu-item>
                        <el-menu-item index="3" style="color: #000;margin-left: 50px;"><i class="el-icon-s-order" style="color: #65a15a;"></i>订单管理</el-menu-item>
                        <el-menu-item index="4" style="color: #000;margin-left: 50px;"><i class="el-icon-shopping-cart-full" style="color: #65a15a;"></i>购物车</el-menu-item>
                        <el-menu-item index="5" style="color: #000;margin-left: 50px;"><i class="el-icon-truck" style="color: #65a15a;"></i>待收货</el-menu-item>
                       

                        <el-menu-item index="6" style="color: #000;margin-left: 50px;"><i class="el-icon-edit" style="color: #65a15a;"></i>待发货</el-menu-item>
                        <el-menu-item index="7" style="color: #000;width:150px;margin-left: 50px;"><i class="el-icon-s-check" style="color: #65a15a;"></i>待评价</el-menu-item>
                    </el-menu>
                
                      <el-alert
                      title="消息提示的文案"
                      type="info"
                      effect="dark">
                    </el-alert>
                
                    </div>

            </div>
            <div class="main_mindd_lb" style="width:100%;">
                <div class="main_lb" style="width:100%;">
                      <el-carousel :interval="2000" arrow="always"  height="500px">
                        <el-carousel-item v-for="item in imageData" :key="item" style="height:500px;">
                            <img style="width:100%;height:100%;" :src="item.img" alt="">
                        </el-carousel-item>
                      </el-carousel>
                </div>
                
            </div>




       <div class="specia-loffer" style="background-color: aliceblue;">
        <!-- <div class="main_lb_img" style="width:150px; float: left;">
             <img  src="http://localhost:8070/images/8ed205d917334750a8111b36efa5d8d1_1.png" alt=""> 
        </div> -->
        <div class="specia-loffer-top" style="margin: auto;width:70%;text-align: center; letter-spacing:5px;margin-top:40px;">
            <!-- <div class="main_lb_img" style="width:150px;margin: auto;">
                <img  src="http://localhost:8070/images/7e40157da92d49a9bb2406a0ea1af088_download.png" alt="">
            </div> -->
            <h1>精选商品</h1>
            <div class="specia-t" style="margin-top:10px;border:2px solid rgb(101, 161, 90);;width:80px;margin:auto;"></div>
        </div>
                <div class="specia-loffer-sp" style="margin: auto;width:80%;margin-top: 40px;left:10px;" >
                    <div class="specia-loffer-box"  v-for="item in tableData">
                        <div class="specia-loffer-box-sp" @click="detail(item.dityId,item.id)" style="width:230px;background-color:#fff;float: left;margin-left: 40px;margin-top: 40px;padding-bottom: 10px;cursor:pointer;border-radius: 5px;">
                            <div class="specia-sp-img">
                                <img style="width:100%;height:230px;border-radius: 5px;" :src="item.imgurl" alt="">
                            </div>
                            <div class="specia-sp-title" >{{item.mame}}</div>
                            <div class="specia-sp-jg">￥{{item.price}}</div>
                            <div class="specia-sp-pf" style="margin:auto; text-align: center;margin-top: 10px;">
                                <el-rate v-model="item.score"></el-rate>
                              </div>
                        </div>
                    </div>
                </div>
                <div class="main_lb_img" style="width:150px;float:right;margin-top: 200px;margin-right: 100px;">
                    <img  src="http://localhost:8070/images/f81def8312e54c7692afe81c1624480f_3.png" alt="">
                </div>
            </div>
            
            


          </el-container>
    </div>
    
</template>

<style scoped>


    .specia-sp-jg
    {
        text-align: center;margin-top: 10px; font-size: 18px;color: #85bd02;font-weight: 600;
    }
    .specia-sp-title
    {
        text-align: center;
        margin-top: 8px;
        font-weight: 600;
        font-size: 15px;
        height:30px;
    }
    .mindd_img
    {
        float: left;
    }

    .mindd_imput
    {
        width:60%;
        float: left;
        margin-top: 10px;
        margin-left: 15%;
    }
    .main_mindd
    {
        width:100%;
        height:120px;
        background-color: #fff;
    }
    .main_mindd_m
    {
        margin: auto;
        width: 60%;
        padding: 30px;
    }
    /* .header_top{
       margin: auto;
    } */
    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

<script>
    export default {
        data() {
          return {
            tableData:[],
            useremail:"",
            tableData1:[],
            tableData2:[],
            tableData3:[],
            tableData4:[],
            count:0,
            input:'',
            squareUrl: "../assets/img/5.png",
            imageData:[
                {img:require("../assets/img/1.jpg")},
                {img:require("../assets/img/2.jpg")},
                {img:require("../assets/img/3.jpg")},
            
            ]
          };
        },

        mounted:function(){
        this.loadexecution();
        this.loadexecu1()
    },

    methods: {

        search(){

            if(this.input=='')
            {
                this.utils.warning("搜索内容不能为空!");
                return;
            }

            this.$router.push({path: '/products',query:{input:this.input}});

        },

        show()
        {

            this.$router.push({path: '/ShoppingCard'});
        },

        sho()
        {

            this.$router.push({path: '/userPage'});
        },

        async loadexecution(){ 
          this.loadexeemail();
          const {data:res} = await this.$http.post('person/getEntityS',this.$qs.stringify({'sta':1,'st':0}));
          if(res.success==true){
            this.tableData = res.result;
        
        console.log(this.tableData)
        //将字符串格式转换为对应的数组格式
        for(var i=0;i<this.tableData.length;i++)
        {
          var img =  this.tableData[i].imgurl.replace("[",""); 
              img =  img.replace("]",""); 
              img =  img.replace(/\"/g, "");
          this.tableData[i].imgurl =img.split(",");
        }

            const {data:re} = await this.$http.post('person/findCount',this.$qs.stringify({email:JSON.parse(localStorage.getItem('email'))}));
            this.count = re.result
          }


        },
        



        async loadexeemail(){ 

        const {data:res} = await this.$http.post('user/getUserEmail',this.$qs.stringify({email:JSON.parse(localStorage.getItem('email'))}));
        if(res.success==false){
            alert("当前用户登录异常!请重新登录")
            this.$router.push({path: '/Login'});

          }else{
            this.useremail = JSON.parse(localStorage.getItem('email'))
            this.squareUrl =  res.result.img
          }
        },

        detail(dityId,id){
            this.$router.push({path: '/DetailPage',query:{ dityId:dityId,id:id}});
        },

        

        handleSelect(index,id){

            if(index == 2){
                this.$router.push({path: '/userPage'});
            }

            if(index==3){
                this.$router.push({path: '/userOrderPage'});
            }

            if(index==4){
                this.$router.push({path: '/ShoppingCard'});
            }

            if(index==5){
                this.$router.push({path: '/received'});
            }

            if(index==6){
                this.$router.push({path: '/shipped'});
            }
            if(index==7){
            this.$router.push({path: '/evaluated'});
}





        }

    }
      }
      
    </script>